<script setup lang="ts">

</script>
<template>
    <view class="cannas">
        <view class="subfloat_pictures">
            <!-- <image src="" mode="scaleToFill" class="cannaserver" /> -->
            <swiper autoplay interval="3000" duration="500" circular>
                <swiper-item v-for="(image, index) in images" :key="index">
                    <image :src="image" mode="aspectFill" class="cannaserver" />
                </swiper-item>
            </swiper>
        </view>
        <view class="mide-box">
            <image class="mide-minbox" src="" title="西汉图"></image>
            <view class="mide-title1">逾期 延期 协商</view>
            <view class="mide-title2">最新进展</view>
        </view>
        <view class="tag">
            <view class="min-box" v-for="index in 5" :key="index">
                <view class="icon">
                    <image src="" class="icon-image"></image>
                </view> <!-- 添加图标元素 -->
                <text class="label">{{ index }}</text>
            </view>
        </view>
    </view>
</template>

<style lang="scss">
.cannas {
    position: sticky;
    margin: 0 64rpx;
    margin-top: 36rpx;
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    .subfloat_pictures {
        display: flex;
        align-items: center;
        width: 632rpx;
        height: 150rpx;
        background: #c15151;
        border-radius: 20rpx;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    }

    .mide-box {
        position: relative;
        margin-top: 42rpx;
        display: flex;
        width: 632rpx;
        height: 194rpx;
        background: #f8d770;
        border-radius: 10px;

        .mide-minbox {
            display: flex;
            margin-left: 46rpx;
            margin-top: 24rpx;
            width: 150rpx;
            height: 146rpx;
            background: #ffffff;
            border-radius: 10px;
            box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
            z-index: 1;
        }

        .mide-title1 {
            position: absolute;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            margin-top: 20rpx;
            margin-left: 91px;
            width: 192px;
            height: 60rpx;
            font-size: 20px;
            font-family: STZhongsong, STZhongsong-400;
            font-weight: 400;
            text-align: CENTER;
            color: #f2ecec;
            line-height: 23px;
        }

        .mide-title2 {
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 300rpx;
            height: 104rpx;
            margin-top: 44rpx;
            margin-right: 26rpx;
            margin-left: 306rpx;
            font-family: STZhongsong, STZhongsong-400;
            font-size: 36px;
            font-weight: 400;
            text-align: center;
            color: #000000;
            line-height: 42px;
        }
    }

    .tag {
        display: flex;
        background: #FEFEDF;
        margin-top: 26rpx;

        .min-box {
            position: relative;
            display: flex;
            width: 112rpx;
            height: 148rpx;
            margin-right: 20rpx;
            /* 可以调整盒子之间的间距 */
            background: #00C0A3;
            /* 盒子的背景颜色 */

            justify-content: center;
            align-items: center;

            .icon {
                display: flex;
                width: 90rpx;
                height: 90rpx;
                background: #ffffff;
                border-radius: 5px;
                box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
                margin-bottom: 40rpx;
                /* 图标距离文本标签的距离 */
            }

            .label {
                position: absolute;
                bottom: 0;
                width: 102rpx;
                height: 34rpx;
                background: #383333;
                font-size: 12px;
                font-family: PingFang SC, PingFang SC-500;
                font-weight: 500;
                text-align: center;
                color: #ffffff;
                line-height: 17px;
            }
        }
    }
}
</style>